
<!DOCTYPE HTML>

<html>



<!-- awwwb.com -->
<meta charset="UTF-8">
<head>

    <style type="text/css">

        body

        {

            font-size:70%;

            font-family:verdana,helvetica,arial,sans-serif;

        }

    </style>



    <script type="text/javascript">

        function cnvs_getCoordinates(e)

        {

            x=e.clientX;

            y=e.clientY;

            document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";

            var c=document.getElementById("myCanvas");

            var cxt=c.getContext("2d");

            cxt.lineTo(x,y);
            cxt.stroke();
        }



        function cnvs_clearCoordinates()

        {
            document.getElementById("xycoordinates").innerHTML="";
        }

    </script>

</head>



<body style="margin:0px;">



<p>把鼠标悬停在下面的矩形上可以看到坐标：</p>

<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()">
    <canvas id="myCanvas" width="200" height="100" ></canvas>
</div>

<br />

<br />

<br />

<div id="xycoordinates"></div>





</body>



<!-- awwwb.com -->

</html>

